<template>
	<view class="department">
		<card-cnt title="上次咨询医生" v-if="doctorData.length > 0">
			<view slot="cnt">
				<swiper class="swiper department_swiper "  :display-multiple-items="doctorNum" :interval="interval" :duration="duration">
					<block v-for="item in doctorData" :key="item.doctorId">
						<swiper-item>
							<view class="cnt"  @click.native="goHistoryDetails(item)">
								<image :src="item.headPic"  mode="aspectFit"/>
								<view class="name">{{item.doctorName}}</view>
								<view  class="text">{{item.deptName}}</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</card-cnt>
		<card-cnt title="已开通咨询科室" >
			<view slot="cnt">
				<uni-list>
					<uni-list-item  v-for="item in deptData"   :key="item.deptId" :title="item.deptName" @click.native="goDoctor(item)"></uni-list-item>
				</uni-list>
			</view>
		</card-cnt>
	</view>
</template>
<!-- state	0 暂停咨询  1有效 -->
<script>
	import cardCnt from '@/components/card/card.vue'
	import uniList from "@/components/uni-ui/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
    import _ from '@/common/util/underscore.js'
    import API from '@/utils/api.js'
	export default {
		data() {
			return {
				interval: 2000,
				duration: 500,
				doctorNum:0,
				doctorData:[],//医生数据
				deptData: []//科室数据
			}
		},
		components:{
			cardCnt,
			uniList,uniListItem
		},
		onLoad() {
			this.doctorNum = parseInt(this.doctorData.length) < 3 ? this.doctorData.length : 3;
            let toParams = {
                hospitalId:uni.getStorageSync('hospitalId'),
                patientUserId: uni.getStorageSync('patientUserId'),//患者id
            }
            this.getDataFn(toParams);
		},
		methods: {
            //获取上次咨询医生、可咨询科室
            getDataFn(toParams){
                uni.showLoading({
                    title: '加载中',
                });
                //查询全局设置、科室列表和常用医生列表
                API.home(toParams).then(res => {
                    uni.hideLoading();
                    if (res.success == true) {
                        let doctors = res.entity.doctors;
                         console.log(doctors,'数据')
                        if (doctors.length > 0) {
                           doctors =  _.map(doctors, function (el) {
                                el.deptName = el.deptName == null ? "" : el.deptName;
                                el.doctorName = el.doctorName == null ? "" : el.doctorName;
                                if (el.headPic == '' || el.headPic == null) {
                                    el.headPic = 'https://ylz-wlzs-test.obs.cn-north-1.myhuaweicloud.com:443/1578537072939';
                                }
                                return el;
                            });
                        }
                         console.log(doctors,'数1据')
                        this.deptData = res.entity.depts,
                        this.doctorData = doctors,
                        this.doctorNum =parseInt(doctors.length) < 3 ? doctors.length : 3
                    }
                })
            },
			//医生跳转到病史详情
			goHistoryDetails(e){
				if (e.state == 0) {
					uni.showModal({
						content: '抱歉，该医生已暂停咨询，您可选择其他医生',
						showCancel:false,
						confirmText:"我知道了"
					})
				} else {
					uni.navigateTo({
						url: "../historyDetails/index?doctorId="+e.doctorId
					})
				}
			},
			//科室跳转到医生列表页面
			goDoctor(e){
				uni.navigateTo({
				    url: '../doctorList/index?deptId='+e.deptId+"&deptName="+e.deptName
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page,body,html{
	    background: #efeff4;
	}
	.department{
		background: #efeff4;
		position: absolute;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.department_swiper{
        margin: 20rpx 0;
		height: 300rpx;
		swiper-item {
			padding-left: 32rpx;
			box-sizing: border-box;
			padding-right:10rpx;
		}
		swiper-item:last-child{
			padding-right: 32rpx;
		}
		swiper-item .cnt{
			text-align: center;
			color: #999999;
			background-color: #ffffff;
			box-shadow: 0rpx 6rpx 20rpx 0rpx 
				rgba(0, 0, 0, 0.08);
			border-radius: 6rpx;
			height: 98%;
		}
		swiper-item image{
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			margin:32rpx auto 40rpx;
		}
		swiper-item .name{
			color: #000000;
			font-size: 34rpx;
		}
		swiper-item .text{
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}
</style>
